.cards {
  display: grid;
  grid-template-rows: auto;
  gap: 24px;
  padding: 12px 0;
}

@media all and (min-width: 640px) {
  .cards {
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  }
}

@media all and (max-width: 640px) {
  .cards {
    grid-template-columns: repeat(auto-fill, 1fr);
  }
}

.card {
  min-height: 100px;
  background: var(--bg-1);
  border: 2px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
}

.card-info {
  padding: 0 24px 24px 24px;
}

.card-title {
  margin-top: 0.7em;
}

.card-image {
  border: unset;
  width: 100%;
}

.card-image-placeholder {
  height: 12px;
  width: 100%;
}

.card-description {
  margin-top: 0.5em;
  overflow: hidden;
}

@media all and (max-width: 720px) {
  .cards {
    gap: 18px;
  }
}
